<template>
  <el-dialog :title="titleMap[mode]" v-model="visible" append-to-body width="750" destroy-on-close :close-on-click-modal="false" @closed="$emit('closed')">
    <el-form ref="form" :model="form" :rules="rules" label-width="100px" :disabled="mode === 'show'" v-loading="loading">
      <el-form-item label="渠道名称" prop="channelName">
        <el-input v-model="form.channelName" placeholder="请输入模板名称" />
      </el-form-item>
      <el-form-item label="发送渠道" prop="channelType">
        <el-radio-group v-model="form.channelType">
          <el-radio v-for="dict in message_type" @change="changeChannel(dict)"  :key="dict.dictValue" :label="dict.dictValue">
            {{ dict.dictLabel }}
          </el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="参数配置" prop="channelConfig">
        <el-input v-model="form.channelConfig"  type="textarea"  placeholder="请输入内容"  rows="12"/>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="visible = false">取 消</el-button>
      <el-button v-if="mode != 'show'" type="primary" :loading="isSaveing" @click="submit()">保 存</el-button>
    </template>
  </el-dialog>
</template>

<script>
export default {
  emits: ["success", "closed"],
  data() {
    return {
      mode: "add",
      titleMap: {
        add: "新增模板",
        edit: "编辑模板",
        show: "查看模板"
      },
      visible: false,
      isSaveing: false,
      loading: false,
      // 模板参数集合
      templateJson: [],
      param:"<div style='color: red'>12312</div>",
      // 表单参数
      form: {
      },
      // 表单校验
      rules: {
		channelName: [{ required: true, message: "模板名称不能为空", trigger: "blur" }],
		channelType: [{ required: true, message: "通知方式不能为空", trigger: "blur" }],
		channelConfig: [{ required: true, message: "通知内容不能为空", trigger: "blur" }]
      },
      // 自定义参数
      fieldForm: {
        field: "",
        fieldName: ""
      },
      // 自定义参数校验
      fieldRule: {
        field: [{ required: true, message: "参数名不能为空", trigger: "blur" }],
        fieldName: [{ required: true, message: "字段不能为空", trigger: "blur" }]
      },
      message_type: []
    }
  },
  mounted() {
    this.getDict()
  },
  methods: {
    //显示
    open(mode = "add") {
      this.mode = mode
      this.visible = true
      return this
    }, //表单提交方法
    submit() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          if (this.form.id != null) {
            this.$API.system.template.updateChannel.put(this.form).then(() => {
              this.$message.success("修改成功")
              this.$emit("success")
              this.visible = false
            })
          } else {
            this.$API.system.template.addChannel.post(this.form).then(() => {
              this.$message.success("新增成功")
              this.$emit("success")
              this.visible = false
            })
          }
        }
      })
    },
    //表单注入数据
    async setData(data) {
      this.loading = true
	  Object.assign(this.form,data)
      this.loading = false
    },
    async getDict() {
      this.message_type = await this.Dict.get("sys_message_model")
    },
	// 渠道修改
	changeChannel(data){
	  let params = data.remark
	  this.form.channelConfig = params;
	}
  }
}
</script>

<style lang="scss" scoped>
.tag__list {
  margin-top: 5px;
  ::v-deep .el-tag {
    cursor: pointer;
  }
}
</style>
